<template>
  <div class="padding-stepper-container">
    <div class="padding-icon" :title="title">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <line x1="12" y1="2" x2="12" y2="6"></line>
        <line x1="12" y1="18" x2="12" y2="22"></line>
        <rect x="5" y="6" width="14" height="12" rx="2"></rect>
      </svg>
    </div>
    <div class="stepper-input">
      <button
        class="stepper-button decrease"
        @click="decrease"
        :title="decreaseTitle"
        :disabled="modelValue <= min"
      >
        -
      </button>
      <input
        type="number"
        :value="modelValue"
        :min="min"
        :max="max"
        :step="step"
        @input="handleInput"
        @blur="handleBlur"
        class="stepper-value"
      />
      <button
        class="stepper-button increase"
        @click="increase"
        :title="increaseTitle"
        :disabled="modelValue >= max"
      >
        +
      </button>
    </div>
    <span class="padding-unit">{{ unit }}</span>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PaddingStepper',
  props: {
    modelValue: {
      type: Number,
      required: true,
    },
    min: {
      type: Number,
      default: 20,
    },
    max: {
      type: Number,
      default: 200,
    },
    step: {
      type: Number,
      default: 2,
    },
    title: {
      type: String,
      default: '上下内边距',
    },
    unit: {
      type: String,
      default: 'px',
    },
    decreaseTitle: {
      type: String,
      default: '减少上下内边距',
    },
    increaseTitle: {
      type: String,
      default: '增加上下内边距',
    },
  },
  emits: ['update:modelValue'],
  methods: {
    decrease() {
      const newValue = Math.max(this.min, this.modelValue - this.step)
      this.$emit('update:modelValue', newValue)
    },
    increase() {
      const newValue = Math.min(this.max, this.modelValue + this.step)
      this.$emit('update:modelValue', newValue)
    },
    handleInput(event: Event) {
      const target = event.target as HTMLInputElement
      const value = parseInt(target.value)
      this.$emit('update:modelValue', value)
    },
    handleBlur() {
      this.validateValue()
    },
    validateValue() {
      let value = this.modelValue
      if (value < this.min) {
        value = this.min
      } else if (value > this.max) {
        value = this.max
      }
      if (value !== this.modelValue) {
        this.$emit('update:modelValue', value)
      }
    },
  },
}
</script>

<style scoped>
.padding-stepper-container {
  display: flex;
  align-items: center;
  width: 140px;
}

.padding-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: #e2e8f0;
  color: #64748b;
  flex-shrink: 0;
}

.stepper-input {
  display: flex;
  align-items: center;
  width: 110px;
}

.stepper-button {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #64748b;
  transition: all 0.2s ease;
}

.stepper-button:hover:not(:disabled) {
  color: #3b82f6;
  background-color: #f1f5f9;
  border-radius: 4px;
}

.stepper-button:active:not(:disabled) {
  background-color: #e2e8f0;
}

.stepper-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stepper-value {
  width: 50px;
  text-align: center;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: inherit;
}

.stepper-value:focus {
  border-bottom: 1px solid #3b82f6;
}

.padding-unit {
  font-size: 12px;
  color: #64748b;
  width: 20px;
  text-align: left;
  flex-shrink: 0;
  margin-left: 2px;
}

/* 暗色主题下的样式调整 */
.dark-toolbar .padding-icon {
  background-color: #334155;
  color: #94a3b8;
}

.dark-toolbar .stepper-button {
  color: #94a3b8;
}

.dark-toolbar .stepper-button:hover:not(:disabled) {
  color: #60a5fa;
  background-color: #334155;
}

.dark-toolbar .stepper-button:active:not(:disabled) {
  background-color: #475569;
}

.dark-toolbar .stepper-value {
  background-color: #1e293b;
  color: #f1f5f9;
}

.dark-toolbar .stepper-value:focus {
  border-bottom: 1px solid #60a5fa;
}

.dark-toolbar .padding-unit {
  color: #94a3b8;
}

/* 响应式样式 */
@media (max-width: 600px) {
  .padding-stepper-container {
    width: 120px;
  }

  .stepper-input {
    width: 90px;
  }
}
</style>
